<template>
  <div class="admin">
    <div class="content_box_right_top">
      <div class="content_box_right_top_left">
        <span class="content_box_right_top_left_span_bg">
          公告主页
          <img
            src="../assets/images/content_x.png"
            class="content_box_right_top_left_img_x"
          />
        </span>
        <span class="content_box_right_top_left_span_bg">
          宿舍管理
          <img
            src="../assets/images/content_x.png"
            class="content_box_right_top_left_img_x"
          />
        </span>
        <span class="content_box_right_top_left_span_bg">
          学生管理
          <img
            src="../assets/images/content_x.png"
            class="content_box_right_top_left_img_x"
          />
        </span>
        <span class="content_box_right_top_left_span_bg">
          公告管理
          <img
            src="../assets/images/content_x.png"
            class="content_box_right_top_left_img_x"
          />
        </span>
        <span>
          管理员管理
          <img
            src="../assets/images/content_x.png"
            class="content_box_right_top_left_img_x"
          />
        </span>
      </div>
      <div class="content_box_right_top_right">
        <span>
          标签选项
          <img
            src="../assets/images/heder_todown.png"
            class="content_box_right_top_right_img_down"
          />
        </span>
      </div>
    </div>
    <div>
      <hr />
    </div>
    <!-- 搜索区 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="userInfo"
          placeholder="请输入搜索姓名"
          clearable
        ></el-input>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="onSearch"
        >搜索</el-button
      >
      <el-button type="primary" icon="el-icon-edit" @click="onReset"
        >重置</el-button
      >
      <el-button
        type="success"
        icon="el-icon-edit"
        @click="addDialog = true"
        plain
        >添加</el-button
      >
    </el-form>

    <!-- 数据 -->
    <el-table :data="tableData" border style="width: 95%">
      <el-table-column prop="a_id" label="id" width="220" align="center">
      </el-table-column>
      <el-table-column prop="a_name" label="姓名" width="220" align="center">
      </el-table-column>
      <el-table-column prop="a_user" label="账号" width="220" align="center">
      </el-table-column>
      <!-- <el-table-column prop="a_pass" label="密码" width="220" align="center">
      </el-table-column> -->
      <el-table-column label="管理员类型" align="center" width="220">
        <template slot-scope="scope">
          <span>{{
            scope.row.a_status == 1
              ? "宿舍管理员"
              : scope.row.a_status == 2
              ? "学生管理员"
              : "超级管理员"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            @click="(editDialog = true), openEdit(scope.row)"
            type="text"
            size="medium"
            >修改</el-button
          >
          <el-button type="text" size="medium" @click="delInfo(scope.row.a_id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @current-change="changePage"
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="count"
    >
    </el-pagination>

    <!-- 新增的弹出框 -->
    <el-dialog title="添加管理员" :visible.sync="addDialog" width="30%">
      <el-form :model="addData">
        <el-form-item label="用户名称" :label-width="formLabelWidth">
          <el-input
            v-model="addData.a_name"
            autocomplete="off"
            style="width: 300px"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="用户账号" :label-width="formLabelWidth">
          <el-input
            v-model="addData.a_user"
            autocomplete="off"
            style="width: 300px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="用户密码" :label-width="formLabelWidth">
          <el-input
            v-model="addData.a_pass"
            autocomplete="off"
            show-password
            style="width: 300px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="管理员类型" :label-width="formLabelWidth">
          <el-select v-model="addData.a_status" placeholder="请选择管理员类型">
            <el-option label="超级管理员" value="0"></el-option>
            <el-option label="宿舍管理员" value="1"></el-option>
            <el-option label="学生管理员" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型名称" :label-width="formLabelWidth">
          <el-select
            v-model="addData.a_type_name"
            placeholder="请选择管理员类型名称"
          >
            <el-option label="超级管理员" value="0"></el-option>
            <el-option label="宿舍管理员" value="1"></el-option>
            <el-option label="学生管理员" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改信息弹出框 -->
    <el-dialog title="修改管理员信息" :visible.sync="editDialog" width="30%">
      <el-form :model="editData">
        <el-form-item label="用户名称" :label-width="formLabelWidth">
          <el-input
            v-model="editData.a_name"
            autocomplete="off"
            style="width: 300px"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="用户账号" :label-width="formLabelWidth">
          <el-input
            v-model="editData.a_user"
            autocomplete="off"
            style="width: 300px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="用户密码" :label-width="formLabelWidth">
          <el-input
            v-model="editData.a_pass"
            autocomplete="off"
            show-password
            style="width: 300px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="管理员类型" :label-width="formLabelWidth">
          <el-select v-model="editData.a_status" placeholder="请选择管理员类型">
            <el-option label="超级管理员" value="0"></el-option>
            <el-option label="宿舍管理员" value="1"></el-option>
            <el-option label="学生管理员" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型名称" :label-width="formLabelWidth">
          <el-select
            v-model="editData.a_type_name"
            placeholder="请选择管理员类型名称"
          >
            <el-option label="超级管理员" value="0"></el-option>
            <el-option label="宿舍管理员" value="1"></el-option>
            <el-option label="学生管理员" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible">取 消</el-button>
        <el-button type="primary" @click="editSave">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 删除信息弹出框 -->
    <!--     <el-dialog title="删除管理员信息" :visible.sync="delDialog" width="20%">
      <span>确定要删除这条信息吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible">取 消</el-button>
        <el-button type="primary" @click="delBtn">确 定</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
// import axios from "axios";
export default {
  data: function () {
    return {
      userInfo: "",
      addDialog: false,
      editDialog: false,
      formLabelWidth: "100px",
      addData: {
        a_name: "",
        a_user: "",
        a_pass: "123456",
        a_status: "2",
        a_type_name: "学生管理员",
      },
      // 修改数据
      editData: {
        a_id: "",
        a_name: "",
        a_user: "",
        a_pass: "",
        a_status: "",
        a_type_name: "",
      },
      tableData: [],
      total: 0,
      page: 1,
      count: 5,
    };
  },
  methods: {
    dialogFormVisible: function () {
      this.addDialog = false;
      this.editDialog = false;
    },
    onSearch: function () {
      this.getData();
    },
    // 重置
    onReset: function () {
      let Info = (this.userInfo = "");
      this.$axios({
        url: "/a_getInfo",
        method: "post",
        // params: {
        //   a_page: this.page,
        //   a_count: this.count,
        //   a_search: this.userInfo,
        // },
        data: {
          a_page: this.page,
          a_count: this.count,
          a_search: Info,
        },
      }).then(({ data }) => {
        // console.log({ data });
        if (data.error == 0) {
          this.tableData = data.data;
          this.total = data.total;
        } else {
          this.$message.error("数据加载失败！");
        }
      });
    },
    // 分页
    changePage: function (page) {
      this.page = page;
      this.getData();
    },
    getData: function () {
      this.$axios({
        url: "/a_getInfo",
        method: "post",
        // params: {
        //   a_page: this.page,
        //   a_count: this.count,
        //   a_search: this.userInfo,
        // },
        data: {
          a_page: this.page,
          a_count: this.count,
          a_search: this.userInfo,
        },
      }).then(({ data }) => {
        // console.log({ data });
        if (data.error == 0) {
          this.tableData = data.data;
          this.total = data.total;
        } else {
          this.$message.error("数据加载失败！");
        }
      });
    },
    // 添加
    add: function () {
      // console.log(this.addData)
      this.$axios({
        url: "/add_admin",
        method: "post",
        data: this.addData,
      }).then(({ data }) => {
        console.log(data)
        if (data.error == 0) {
          this.$message.success("添加成功");
          this.addDialog = false;
          this.getData();
        } else {
          this.$message.error("添加失败");
        }
      });
    },
    // 删除
    delInfo: function (a_id) {
      this.$axios({
        url: "/a_delAdmin",
        method: "post",
        data: {
          a_id: a_id,
        },
      }).then(({ data }) => {
        if (data.error == 0) {
          this.$message.success("删除成功!");
          // this.delDialog = false;
          this.getData();
        } else {
          this.$message.error("删除失败！！");
        }
      });
    },

    // 修改数据
    openEdit: function (row) {
      let editData = {...row}
      this.editData = editData;
    },
    // 修改保存按钮
    editSave: function () {
      this.$axios({
        url: "/revise_admin",
        method: "post",
        data: this.editData,
      }).then(({ data }) => {
        if (data.error == 0) {
          this.$message.success("数据修改成功！");
          this.getData();
          this.editDialog = false;
        } else {
          this.$message.error("数据修改失败！");
        }
      });
    },
  },
  mounted: function () {
    this.getData();
  },
};
</script>



<style scoped lang='less'>
.admin {
  .content_box_right {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    margin-right: 20px;
    display: none;
  }
  .content_box_right_top {
    width: calc(100% - 30px);
    height: 50px;
    margin: 20px;
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 2px 6px 5px rgb(212, 212, 212);
  }
  .content_box_right_top_left span {
    width: 100px;
    height: 20px;
    padding: 7px;
    background-color: #4985fb;
    margin-left: 10px;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
  }
  .content_box_right_top_left_img_x {
    position: relative;
    top: 2px;
    left: 2px;
  }
  .content_box_right_top_right span {
    width: 100px;
    height: 20px;
    padding: 7px;
    background-color: #4985fb;
    margin-right: 10px;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
  }
  .content_box_right_top_right_img_down {
    position: relative;
    top: -2px;
    left: 1px;
  }
  .content_box_right_content_title {
    font-size: 16px;
    width: 100%;
    height: 33px;
    line-height: 33px;
    vertical-align: middle;
    background-color: #fff;
    box-sizing: border-box;
    padding-left: 30px;
    font-weight: bold;
  }
  .content_box_right_content_message {
    width: calc(100% - 30px);
    margin: 20px;
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 2px 6px 5px rgb(212, 212, 212);
  }
  div hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #000;
  }
  /* span标签背景 */
  .content_box_right_top_left_span_bg {
    background-color: #fff !important;
    color: #6a6a6a !important;
    border: 1px solid #ccc;
  }
  // 页码
  .el-pagination {
    margin-top: 30px;
    text-align: center;
    border-radius: 5px;
  }
  // 表格布局
  .el-table {
    margin: 0 20px;
    border-radius: 5px;
  }

  .el-form {
    padding-left: 20px;
  }
}
</style>